/**
 * 功能描述: 评论器样式表
 * @author 崔孝楠
 * @date 2022/9/28 17:13
 * @version 1.0
 */
@import '../../style/index.scss';

// 评论区容器布局
@mixin comment-container--layout {
  position: relative;
}

// 评论列表项布局
@mixin comment-list-item--layout {
  padding: 12px 0;
}

// 评论的布局
@mixin comment-content--layout {
  position: relative;
  flex: 1 1 auto;
  min-width: 1px;
}

// 评论人信息布局
@mixin comment-content-author--layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 4px;
  // 文本布局
  > span {
    padding-right: 8px;
    line-height: 18px;
  }
}

//操作区域布局
@mixin comment-actions--layout {
  margin-top: 12px;
  margin-bottom: inherit;
  padding-left: 0;
  // 操作项布局
  > li > span {
    margin-right: 10px;
  }
}

// 评论数量布局
@include b(list-header) {
  padding-top: 12px;
  padding-bottom: 12px;
}

// 评论数分割线
@include b(list-split) {
  @include b(list-header) {
    border-bottom: 1px solid #f0f0f0;
  }
}

// 评论区容器样式
@include b(comment-container) {
  transition: opacity .3s;
  @include comment-container--layout;
}

// 评论列表项样式
@include b(comment-list-item) {
  color: $color-text-primary;
  border-bottom: $border-base;
  @include comment-list-item--layout;
  // 最后一个评论无底边框
  &:last-child {
    border-bottom: none;
  }
}

// 评论区布局
@include b(comment) {
  display: flex;
  padding: 16px 0;
}

// 头像布局
@include b(comment-avatar) {
  position: relative;
  flex-shrink: 0;
  margin-right: 12px;
  cursor: pointer;
  // 图片格式
  img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
}

// 评论的样式
@include b(comment-content) {
  font-size: $font-size-base;
  word-wrap: break-word;
  @include comment-content--layout;
}

// 评论人信息样式
@include b(comment-content-author) {
  @include comment-content-author--layout;
  // 文本字体
  > span {
    font-size: $font-size-extra-small;
  }
}

// 评论人名称
@include b(comment-content-author-name) {
  color: $color-text-secondary;
  transition: color .3s;
}

// 评论时间
@include b(comment-content-author-time) {
  color: $color-text-placeholder;
  white-space: nowrap;
  cursor: auto;
}

// 添加评论布局
@include b(input-content) {
  margin: 0 0 24px;
  padding: 0;
  // 文本域敢赌
  @include b(textarea) {
    height: 100px;
  }
}

//操作区域样式
@include b(comment-actions) {
  @include comment-actions--layout;
  // 操作项样式
  > li > span {
    color: $color-text-secondary;
    font-size: $font-size-extra-small;
    cursor: pointer;
    transition: color .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
}

// 嵌套回复
@include b(comment-nested) {
  margin-left: 44px;
}
